import React, { Component } from 'react'
import { getBoutique } from '../../../api/playlists'


import './BoutiqueList.less'
export default class index extends Component {

  constructor() {
    super()
    this.state = {
      playlists: []
    }
  }

  componentDidMount() {
    this.getBoutiqueList()
  }

  getBoutiqueList = async () => {
    const { data } = await getBoutique()

    this.setState({
      playlists: data.playlists
    })
  }


  getContest = () => {

    return this.state.playlists[0] ? <>
      <div className="icon-warp">
        <img src={this.state.playlists[0].coverImgUrl} alt="" />
      </div>
      <div className="content-warp">
        <div className="tag">精品歌单</div>
        <div className="title">{this.state.playlists[0].name}</div>
        <div className="info">{this.state.playlists[0].description}</div>
      </div>
      <img className="back-img" src={this.state.playlists[0].coverImgUrl} alt="" />
    </> : ''
  }

  render() {

    return (
      <div className="top-cart">
        {this.getContest()}
      </div>
    )
  }
}
